<template>
  <div>
    <div class="advertising">
      <!-- 间距组件 -->
      <div class="advertisingspace">
        <el-space>
          <!-- 激活-冻结 -->
          <el-select placeholder="请选择广告状态" v-model="status">
            <el-option
              :label="item.name"
              :value="item.value"
              :key="item.value"
              v-for="item in adStatusMap"
            />
          </el-select>
          <!-- 广告类型 -->
          <el-select placeholder="请选择广告类型" v-model="type">
            <el-option
              v-for="item in adTypeMap"
              :label="item.name"
              :value="item.value"
              :key="item.value"
            />
          </el-select>
          <el-button
            type="primary"
            class="iconfont icon-sousuo"
            @click="advertising()"
            >查找</el-button
          >
          <el-button type="primary" class="iconfont icon-tianjia" @click="add()"
            >添加</el-button
          >
        </el-space>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="广告ID" width="100" align="center" />
        <el-table-column
          prop="title"
          label="广告标题"
          width="180"
          align="center"
        />
        <el-table-column
          prop="imgUrl"
          label="广告图片"
          width="180"
          align="center"
        >
          <template #default="scope">
            <el-popover
              width="500"
              placement="right"
              v-if="scope.row.type != 6 && scope.row.type != 9"
            >
              <template #reference>
                <el-image :src="scope.row.imgUrl" />
              </template>
              <img
                :src="scope.row.imgUrl"
                style="max-height: 200px; max-width: 300px"
              />
            </el-popover>
            <el-tag v-else type="info">此类型无需图片</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="广告类型"
          width="120"
          align="center"
        >
          <template #default="scope">
            <el-tag>{{ advertisingType(scope.row.type) }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="name"
          label="广告状态"
          width="120"
          align="center"
        >
          <template #default="scope">
            <el-tag>{{ scope.row.status == 1 ? "激活" : "冻结" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="关联类型"
          width="120"
          align="center"
        >
          <template #default="scope">
            <el-tag>{{ relatednessType(scope.row.unionType) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="unionValue"
          label="关联值[ID]"
          width="180"
          align="center"
        />
        <el-table-column
          prop="gmtCreate"
          label="创建时间"
          width="180"
          :formatter="dateFormat"
        />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 创建对话框 -->
      <el-dialog
        v-model="dialogVisible"
        :title="title"
        width="30%"
        destroy-on-close
      >
        <el-form
          ref="ruleFormRef"
          :model="addpink"
          :rules="addFormRule"
          label-width="120px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <el-form-item label="广告标题" prop="title">
            <el-input v-model="addpink.title" />
          </el-form-item>
          <el-form-item label="广告类型" prop="type">
            <el-select
              v-model="addpink.type"
              placeholder="请选择"
              @change="selecttype"
            >
              <el-option
                v-for="item in adTypeMap"
                :label="item.name"
                :value="item.value"
                :key="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="广告图片"
            prop="imageUrl"
            v-if="
              adTypeMap.find((item) => item.value == addpink.type)?.picRequire
            "
          >
            <el-upload
              class="avatar-uploader"
              :action="addback + '/upload/admin'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :headers="token"
            >
              <img :src="addpink.imgUrl" class="avatar" style="width: 100px" />
            </el-upload>
          </el-form-item>
          <el-form-item label="广告状态" prop="status ">
            <el-switch
              v-model="addpink.status"
              class="ml-2"
              active-color="#13ce66"
              inactive-color="#ccc"
              :inactive-value="0"
              :active-value="1"
            />
          </el-form-item>
          <el-form-item label="关联类型" prop="unionType ">
            <el-select v-model="addpink.unionType" placeholder="点击时跳转">
              <el-option
                :disabled="disa(item.value)"
                v-for="(item, index) in adUnionTypeMap"
                :label="item.name"
                :value="item.value"
                :key="index"
              />
            </el-select>
          </el-form-item>
          <!-- 商品 -->
          <el-form-item label="商品" v-if="addpink.unionType == 1">
            <el-config-provider :locale="locale">
              <div class="example-block">
                <el-cascader
                  :options="options"
                  :props="props1"
                  clearable
                  v-model="addpink.unionValue"
                  placeholder="关联至商品"
                />
              </div>
            </el-config-provider>
          </el-form-item>
          <!-- 类目 -->
          <el-form-item label="类目" v-else-if="addpink.unionType == 2">
            <el-config-provider :locale="locale" label="类型关联">
              <div class="example-block">
                <el-cascader
                  :options="optionss"
                  :props="props2"
                  clearable
                  v-model="addpink.unionValue"
                  placeholder="关联至类目"
                />
              </div>
            </el-config-provider>
          </el-form-item>
          <!-- 关键字 -->
          <el-form-item label="关键字" v-else-if="addpink.unionType == 3">
            <el-input
              placeholder="点击广告后用户将得到此关键字"
              v-model="addpink.unionValue"
            />
          </el-form-item>
          <!-- 功能页面 -->
          <el-form-item
            label="功能类型"
            prop="unionType"
            v-else-if="addpink.unionType == 4"
          >
            <el-select
              placeholder="请选择一个功能页面"
              v-model="addpink.unionValue"
            >
              <el-option
                v-for="item in functionPages"
                :label="item.name"
                :value="item.value"
                :key="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="sure()">确定</el-button>
          </span>
        </template>
      </el-dialog>
      <PagLnatio
        v-bind="paging"
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
      ></PagLnatio>
    </div>
  </div>
</template>

<script>
import PagLnatio from "@/components/PagLnatio.vue";
import http from "@/http";
import host from "@/http";
import cookin from "js-cookie";
import moment from "moment";
import { ElMessage as $msg } from "element-plus";
export default {
  components: {
    PagLnatio,
  },
  computed: {
    addback() {
      return host.host;
    },
  },
  data() {
    return {
      ques: [],
      id: "",
      type: "",
      status: "",
      title: "添加", //弹出框
      dialogVisible: false, //弹框隐藏
      tableData: [], //列表数组
      props1: {
        children: "children",
        label: "label",
        value: "id",
        checkStrictly: true,
        emitPath: false,
      },
      props2: {
        children: "childrenList",
        label: "title",
        value: "id",
        checkStrictly: true,
        emitPath: false,
      },
      addpink: {
        type: "", //广告类型
        unionType: "", //关联类型
        title: "", //标题
        unionValue: "", //关联值
        imgUrl: "", //广告图片地址
        status: 0, //广告状态
      },
      //正则
      addFormRule: {
        title: [
          { required: true, message: "广告标题不能为空！", trigger: "blur" },
        ],
        type: [
          {
            required: true,
            message: "广告类型不能为空！",
            trigger: "change",
          },
        ],
        unionValue: [
          { required: true, message: "此项不能为空！", trigger: "blur" },
        ],
      },

      //功能页面
      functionPages: [
        { value: "/pages/product/groupshop", name: "团购列表" },
        { value: "/pages/couponst", name: "优惠券列表" },
      ],
      adTypeMap: [
        {
          value: 1,
          unionTypes: [1, 2, 3, 4],
          picRequire: true,
          name: "轮播",
        },
        { value: 2, unionTypes: [2], picRequire: true, name: "分类精选" },
        {
          value: 3,
          unionTypes: [1, 2, 3, 4],
          picRequire: true,
          name: "横幅",
        },
        {
          value: 4,
          unionTypes: [1, 2, 3, 4],
          picRequire: true,
          name: "首页轮播下5按钮",
        },
        {
          value: 6,
          unionTypes: [1, 2, 3, 4],
          picRequire: false,
          name: "公告",
        },
        { value: 9, unionTypes: [1], picRequire: false, name: "商品推荐" },
      ],
      //4种广告关联类型
      adUnionTypeMap: [
        { value: 1, name: "商品" },
        { value: 2, name: "类目" },
        { value: 3, name: "关键字" },
        { value: 4, name: "功能页面" },
      ],
      adStatusMap: [
        { value: 0, name: "冻结" },
        { value: 1, name: "激活" },
      ],
      //分页
      paging: {
        page: 1, //默认第一页
        limit: 10, //显示几页
        total: null,
      },
    };
  },
  created() {
    this.advertising();
    this.category(); //类目树
    this.dows(); //商品树
    this.token = { AdminToken: cookin.get("token") };
  },
  methods: {
    handleDelete(index, row) {
      // console.log(row);
      ElMessageBox.confirm("是否删除此管理员", {
        confirmButtonText: "OK",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let deletes = {
            _gp: "admin.advert",
            _mt: "delete",
            type: row.type,
            adId: row.id,
          };
          http.post(deletes).then((res) => {
            console.log(res);
            if (200 == res.errno) {
              this.tableData.splice(index, 1);
            }
          });
          ElMessage({
            type: "success",
            message: "删除成功",
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消成功",
          });
        });
    },
    //选择值
    selecttype(row) {
      //过滤数组
      this.ques = this.adTypeMap.filter(
        (item) => item.value == row
      )[0].unionTypes;
    },
    disa(value) {
      for (const item of this.ques) {
        if (value == item) {
          return false;
        }
      }
      return true;
    },
    //图片上传回调
    handleAvatarSuccess(res) {
      console.log(res);
      if (200 == res.errno) {
        this.addpink.imgUrl = res.url;
      }
    },
    //商品树
    dows() {
      let dows = {
        _gp: "admin.product",
        _mt: "getSpuBigTree",
      };
      http.post(dows).then((res) => {
        this.options = res.data;
      });
    },
    //类目树
    category() {
      let leimu = {
        _gp: "admin.category",
        _mt: "categoryTree",
      };
      http.post(leimu).then((res) => {
        console.log(res);
        this.optionss = res.data;
      });
    },
    //编辑按钮
    handleEdit(index, row) {
      this.id = row.id;
      this.title = "编辑";
      Object.assign(this.addpink, row);
      this.addpink.unionValue = Number(this.addpink.unionValue);
      this.dialogVisible = true;
    },
    //渲染列表
    advertising() {
      let data = {
        _gp: "admin.advert",
        _mt: "list",
        pageNo: this.paging.page,
        limit: this.paging.limit,
        type: this.type,
        status: this.status,
      };
      http.post(data).then((res) => {
        console.log(res);
        if (200 == res.errno) {
          this.tableData = res.data.items;
          this.paging.total = res.data.total;
        }
      });
    },
    add() {
      this.addpink = this.$options.data().addpink;
      this.title = "添加";
      this.dialogVisible = true;
    },
    //添加
    sure() {
      if (this.title == "添加") {
        if (this.addpink.imgUrl == "") {
          this.addpink.imgUrl =
            "//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png";
        }
        let data = {
          _gp: "admin.advert",
          _mt: "create",
          ...this.addpink,
        };
        http.post(data).then((res) => {
          if (200 == res.errno) {
            $msg.success("添加成功！");
            this.dialogVisible = false;
            this.advertising();
            this.addpink = this.$options.data().addpink;
          }
        });
      } else {
        let datas = {
          _gp: "admin.advert",
          _mt: "edit",
          adId: this.id,
          ...this.addpink,
        };
        http.post(datas).then((res) => {
          console.log(res);
          if (200 == res.errno) {
            $msg.success("编辑成功！");
            this.dialogVisible = false;
            this.advertising();
          }
        });
      }
    },
    //列表广告类型
    advertisingType(row) {
      return this.adTypeMap.find((item) => item.value == row).name;
    },
    //列表关联类型
    relatednessType(row) {
      return this.adTypeMap.find((item) => item.value == row).name;
    },
    //时间戳
    dateFormat(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("MM月DD日HH时mm分");
    },
    //分页
    handleSizeChange(val) {
      console.log(val);
      this.paging.limit = val;
      this.advertising();
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.advertising();
    },
  },
};
</script>

<style lang="less" scope>
.advertising {
  width: 98%;
  margin: auto;
  .advertisingspace {
    height: 40px;
  }
  .avatar-uploader .el-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    width: 100px;
    height: 100px;
    border: 1px dashed #ccc;
    border-radius: 8px;
    .img {
      width: 100px;
      height: 100px;
    }
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
  }
}
</style>
